{% extends "base.html" %}
{% from "_when.html" import when_field with context %}
{% block title %}{{ hs.name }} · {{ app_name }}{% endblock %}
{% block body %}
<h1>🐾 Your {{ hs.name }} <a class="gear" href="/settings#handler" title="rules and the prompt library">⚙</a></h1>
<section class="card voicecard"><p class="voice big">“{{ hs.line }}”</p></section>
{% if hs.challenge %}{% include "challenge_form.html" %}{% endif %}
{#- The blank pages the audit is still holding, and the one door back (handler.catch_up). 🔴 It
    sits above everything else on purpose: before it existed there was no way to answer a missed
    day at all, and the lapse questions kept asking for pages nobody could write. -#}
{% if hs.pages %}{% set n = hs.pages|length %}
<section class="card need catchup" id="catchup">
  <h3>🗒 Catch up <small class="hint">{{ n }} blank page{{ 's' if n != 1 }} your {{ hs.name }} is still holding</small></h3>
  <div class="chips">{% for p in hs.pages %}<span class="chip lapse" title="marked blank at midnight — no reflection that day">📄 {{ p.label }}</span>{% endfor %}</div>
  <p class="prompt">{{ catchup_q }}</p>
  <form method="post" action="/handler/catchup">
    <textarea name="body" rows="5" required minlength="{{ minchars }}" placeholder="One honest entry for all of them. What happened, and why none of it got written."></textarea>
    <p class="hint">one entry answers every page · at least {{ minchars }} characters · <b>no xp</b> · each 📄 Blank page (2) becomes a 📝 Late page (1) for the rest of its week · the days stay blank on the calendar, and the time already added stays</p>
    <button class="primary">🗒 Catch up {{ n }} page{{ 's' if n != 1 }}</button>
  </form>
</section>
{% endif %}
{#- What somebody else said to you today — the AI's line, a pack Handler's. The rules line above
    always stands. 🔴 A line about time while your lock is hidden shows masked; it is theirs and
    stored verbatim, and it is yours to reveal here, never shown by default. -#}
{% for key in ('pack_line', 'ai_line') %}{% set l = hs[key] %}{% if l %}
<section class="card voicecard other-voice {{ key }}">
  <p class="hint">{{ l.label }} <small>{{ l.ts|rel(now) }}</small></p>
  {% if l.masked and not reveal %}<p class="voice">{{ l.text }} <a class="chip" href="/handler?reveal=1" title="show the words; the timer stays hidden everywhere else">tap to reveal</a></p>
  {% else %}<p class="voice">“{{ l.raw if (l.masked and reveal) else l.text }}”</p>{% endif %}
</section>
{% endif %}{% endfor %}
{% include "mischief_panel.html" ignore missing %}
{% if hs.habits %}
<section class="card habits-view tone-{{ hs.habits.tone }}">
  <h3>On your habits <small class="hint">the work your {{ hs.name }} is watching</small> <a class="more" href="/habits">habits →</a></h3>
  <p class="voice">“{{ hs.habits.line }}”</p>
  <div class="chips">
    {% for v in hs.habits.verdicts %}<span class="chip hv hv-{{ v.state }}" title="{{ v.line }}">{{ v.icon }} {{ v.title }} · {{ v.state|replace('_', ' ') }}</span>{% endfor %}
  </div>
  <p class="hint">Consistency earns praise, XP and time off the clock. Slacking earns a word — and minutes on, if you turned that on in <a href="/settings#habits">Settings → Habits</a>. Too new to judge is a state too: nothing is said about a habit in its first week.</p>
</section>
{% endif %}

<section class="grid2">
  <div class="card {{ 'done' if hs.reflected else 'need' }}">
    <h3>Today's reflection <small class="hint">{{ 'done' if hs.reflected else 'required · due ' ~ hs.due_hour ~ ':00' }}</small></h3>
    {% if hs.reflection_prompt %}<p class="prompt">{% if hs.reflection_prompt.lapse %}<span class="chip lapse" title="your {{ hs.name }} is asking about this — answering it is a confession">{{ hs.reflection_prompt.lapse.icon }} {{ hs.reflection_prompt.lapse.label }}</span> {% endif %}{{ hs.reflection_prompt.text }}{% if hs.pages and hs.reflection_prompt.lapse and hs.reflection_prompt.lapse.why == 'blank_page' %} <a class="chip" href="#catchup">🗒 catch the pages up →</a>{% endif %}</p>{% endif %}
    <form method="post" action="/handler/reflect">
      <input type="hidden" name="prompt_id" value="{{ hs.reflection_prompt.id if hs.reflection_prompt else 0 }}">
      <label>Write it. Properly.
        <textarea name="body" rows="7" required minlength="{{ minchars }}" placeholder="No summaries. What happened, what it felt like, what you're taking from it."></textarea></label>
      <p class="hint">at least {{ minchars }} characters · +15 xp</p>
      <button class="primary">📓 Submit to your {{ hs.name }}</button>
      {{ when_field('⏱ wrote this earlier? set the time') }}
    </form>
    <form id="vm-form" method="post" action="/handler/reflect/voice" enctype="multipart/form-data">
      <input type="hidden" name="prompt_id" value="{{ hs.reflection_prompt.id if hs.reflection_prompt else 0 }}">
      <input type="hidden" name="duration_seconds" id="vm-duration" value="0">
      <div class="row">
        <button type="button" id="vm-rec">🎙 Speak it instead</button>
        <button type="button" id="vm-stop" disabled>■ Stop</button>
        <span class="medclock" id="vm-clock">—</span>
      </div>
      <audio id="vm-preview" controls preload="none" hidden></audio>
      <label>Anything to add in writing <input name="note" placeholder="optional — the spoken memo is the reflection"></label>
      <button class="primary" id="vm-send" disabled>📤 Send to your {{ hs.name }}</button>
      <p class="hint" id="vm-status">at least {{ voice_min }} seconds · +15 xp · stays on this box</p>
    </form>
  </div>

  <div class="card {{ 'need' if hs.checkin.due else '' }}">
    <h3>Check-in <small class="hint">{% if not hs.active %}only while locked{% elif hs.checkin.overdue %}overdue{% elif hs.checkin.due %}due now{% else %}next {{ hs.checkin.next_at|rel(now) }}{% endif %}</small></h3>
    <form method="post" action="/handler/checkin" class="checkin">
      <input type="hidden" name="prompt_id" value="{{ hs.checkin_prompt.id if hs.checkin_prompt else 0 }}">
      {% for k in score_keys %}
      <label class="slider">{{ k }} <output>5</output>
        <input type="range" name="{{ k }}" min="1" max="10" value="5" oninput="this.previousElementSibling.value=this.value"></label>
      {% endfor %}
      {% if hs.checkin_prompt %}<p class="prompt small">{% if hs.checkin_prompt.lapse %}<span class="chip lapse">{{ hs.checkin_prompt.lapse.icon }} {{ hs.checkin_prompt.lapse.label }}</span> {% endif %}{{ hs.checkin_prompt.text }}{% if hs.pages and hs.checkin_prompt.lapse and hs.checkin_prompt.lapse.why == 'blank_page' %} <a class="chip" href="#catchup">🗒 catch up →</a>{% endif %}</p>{% endif %}
      <label>Answer <input name="note" placeholder="one honest line"></label>
      <button class="primary">🐾 Check in</button>
      {{ when_field() }}
    </form>
  </div>
</section>

<section class="grid2">
  <div class="card">
    <h3>Mantra of the day <small class="hint">{{ 'recited' if hs.recited else 'say it out loud' }}</small></h3>
    {% if hs.mantra %}
    <p class="mantra">{{ hs.mantra.text }}</p>
    <form method="post" action="/handler/recite"><input type="hidden" name="kind" value="mantra"><input type="hidden" name="prompt_id" value="{{ hs.mantra.id }}"><button class="primary">🔁 I said it</button>
      {% if mantra_audio %}<a class="btn" href="/trance/mantra">🌀 play it</a>{% endif %}</form>
    {% endif %}
    <details><summary>all mantras</summary>
      <ul class="lines">{% for m in mantras %}<li><span>{{ m.text }}</span><form method="post" action="/handler/recite"><input type="hidden" name="kind" value="mantra"><input type="hidden" name="prompt_id" value="{{ m.id }}"><button class="small">recite</button></form></li>{% endfor %}</ul>
    </details>
    <h3 style="margin-top:1rem">Affirmations</h3>
    <ul class="lines">{% for a in affirmations %}<li><span>{{ a.text }}</span><form method="post" action="/handler/recite"><input type="hidden" name="kind" value="affirmation"><input type="hidden" name="prompt_id" value="{{ a.id }}"><button class="small">✨</button></form></li>{% endfor %}</ul>
  </div>

  <div class="card">
    <h3>Headspace session <small class="hint">meditation · hypno scripts later</small></h3>
    <form method="post" action="/handler/meditation" id="medform">
      <label>Script <select name="prompt_id"><option value="0">— unguided —</option>{% for m in meditations %}<option value="{{ m.id }}">{{ m.text[:70] }}{% if m.text|length > 70 %}…{% endif %}</option>{% endfor %}</select></label>
      <div class="row">
        <label>Minutes <input type="number" name="minutes" id="medmin" min="1" value="10"></label>
        <button type="button" id="medstart">▶ Start</button>
        <button class="primary" id="medlog" disabled>🧘 Log it</button>
      </div>
      <div class="medclock" id="medclock">—</div>
      <label>Afterwards <input name="note" placeholder="one line on where you went"></label>
      {{ when_field('⏱ sat earlier, off-app? set the time and log it') }}
    </form>
    <p class="hint">xp = minutes, up to 20. The log button unlocks when the timer ends — sit the whole thing. Logging an earlier session unlocks it too.</p>
  </div>
</section>

<section class="card">
  <h3>Journal</h3>
  <ul class="events">
    {% for e in entries %}
    <li class="ev">
      <span class="ev-ico">{{ {'reflection':'📓','checkin':'🐾','mantra':'🔁','affirmation':'✨','meditation':'🧘','confession':'🙏','catchup':'🗒'}[e.kind] }}</span>
      <div class="ev-body">
        <div class="ev-head"><b>{{ e.kind }}</b>{% if e.prompt_text %}<span class="hint">{{ e.prompt_text }}</span>{% endif %}</div>
        {% if e.kind == 'checkin' %}<div class="scores">{% for k, v in e.scores_d.items() %}<span><i>{{ k }}</i> {{ v }}</span>{% endfor %}</div>{% endif %}
        {% if e.duration_seconds %}<div class="ev-detail">{{ e.duration_seconds|dur }}</div>{% endif %}
        {% if e.media_id %}<audio class="ev-audio" controls preload="none" src="/media/{{ e.media_id }}"></audio>{% endif %}
        {% if e.body %}<div class="ev-detail body">{{ e.body }}</div>{% endif %}
      </div>
      <a href="/handler/entry/{{ e.id }}"><time title="{{ e.ts|local('%Y-%m-%d %H:%M') }}">{{ e.ts|rel(now) }}</time></a>
    </li>
    {% else %}<li class="hint">Nothing written yet. That changes today.</li>{% endfor %}
  </ul>
</section>
{% endblock %}
{% block scripts %}
<script src="/static/voice.js"></script>
<script>
(function () {
  const start = document.getElementById('medstart'), log = document.getElementById('medlog'),
        clock = document.getElementById('medclock'), min = document.getElementById('medmin'),
        form = document.getElementById('medform');
  let iv = null;
  start.addEventListener('click', () => {
    let left = Math.max(1, parseInt(min.value || '1', 10)) * 60;
    min.readOnly = true; start.disabled = true; log.disabled = true;
    const paint = () => { clock.textContent = Latch.clock(left); };
    paint();
    iv = setInterval(() => {
      left -= 1; paint();
      if (left <= 0) { clearInterval(iv); clock.textContent = 'done — good boy'; log.disabled = false; }
    }, 1000);
  });
  // A session sat earlier, off-app: giving a time is the proof, so the log button opens.
  const when = form.querySelector('input[name=when]');
  if (when) when.addEventListener('input', () => { if (when.value) log.disabled = false; });
})();
</script>
{% endblock %}